<script lang="ts">
	import Button from '@smui/button';
	import { goBack } from '$utils/intercept';
	import { readable } from 'svelte/store';
	import { goto } from '$app/navigation';
	import { useNavBarStore } from '@/store/modules/navBar';
	import { createMessage } from '$components/basic/message';
	import { onMount } from 'svelte';

	const to_product = (index: number) => {
		const navStore = useNavBarStore();

		const url = navStore.getPrevAndNext()[index];
		if (url) return goto('/detail/' + url);
		createMessage({ type: 'warning', message: 'No more products' });
	};

	const to_prev_product = () => to_product(0);
	const to_next_product = () => to_product(1);

	let showLeft = true;
	let showRight = true;
	const initButtonState = () => {
		const navStore = useNavBarStore(); // init store
		navStore.pre_and_next.subscribe(([prev, next]) => {
			showLeft = !!prev;
			showRight = !!next;
		});
	};
	onMount(initButtonState);
</script>

<div class="w-full h-48px color-white! flex flex-row items-center justify-between">
	<div class="left-ctrl">
		<Button
			class="w-full mb-10px gap-10px text-left color-white!"
			style=" justify-content: left;"
			on:click={goBack}
		>
			<span class="material-symbols-outlined"> undo </span>
			<span>Back</span>
		</Button>
	</div>
	<div class="right-ctrl flex-cc gap-25px">
		{#if showLeft}
			<Button on:click={to_prev_product} variant="text" class="color-white! gap-10px">
				<span class="material-symbols-outlined"> keyboard_tab_rtl </span>
				Prev
			</Button>
		{/if}
		{#if showRight}
			<Button on:click={to_next_product} variant="text" class="color-white! gap-10px">
				Next
				<span class="material-symbols-outlined"> keyboard_tab </span>
			</Button>
		{/if}
	</div>
</div>
